<template>
    <div class="banner">
        <div class="banner-text">
            <h2>{{ props.name }}</h2>
            <div class="breadcrumb">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-s-home"></i>首页</el-breadcrumb-item>
                    <template v-for="bread in props.breads">
                        <template v-if="bread.to">
                            <el-breadcrumb-item :key="bread.name" :to="{ name: bread.name }">{{
                                bread.label
                            }}</el-breadcrumb-item>
                        </template>
                        <template v-else>
                            <el-breadcrumb-item :key="bread.name">{{ bread.label }}</el-breadcrumb-item>
                        </template>
                    </template>
                </el-breadcrumb>
            </div>
        </div>
    </div>
</template>
<script setup>
import { defineProps } from 'vue'
const props = defineProps({
    name: {
        type: String,
        required: true,
    },
    breads: {
        type: Array,
        required: true,
    },
})
</script>
<style lang="scss" scoped>
.banner {
    width: 100%;
    height: 180px;
    background-color: transparent;
    background-image: url('~@/assets/imgs/bg_img.png');
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
}

.banner-text {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    margin-top: -30px;
    text-align: center;
    h2 {
        display: inline-block;
        font-weight: bold;
        font-size: 2em;
        margin-bottom: 5px;
        text-align: center;
        text-transform: uppercase;
    }
    .breadcrumb {
        .el-breadcrumb {
            display: inline-block;
        }

        .el-breadcrumb__inner.is-link:hover {
            color: #00a7e1 !important;
        }
    }
}
</style>
